<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
import { ref, computed, onUpdated } from 'vue'
import { ElTable } from 'element-plus'
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { useRoute  } from 'vue-router'
import { v4 as uuid } from 'uuid';

import { topics, save_sxsbd, list_bdlb } from '@/request/apione.js'
let lsid = ref<string>('800977746600003001')
let KSSJ = ref<string>("2023-01-01")
let JSSJ = ref<string>("2025-01-01")
const route = useRoute()
//获取route的参数

console.log(route,"1111111111111111122222222222");

const config = reactive({
  autoInsertSpace: true,
})
let tableData = ref({})
let tableDataAll = ref({})
let tableDataAlltow = ref({})
let tableData1 = ref({})
//查询列表
const getPageList = () => {

  // TODO 查询之前先清空列表(不清空可能会因为数据缓存影响)
  topics(
    // {
    // //获取url参数拼接参数
    //  kssj: KSSJ,
    //  jssj: JSSJ,
    // ksid: lsid,}
    route == undefined ? {} : route.query
  ).then((res: any) => {
    console.log(res.data.ls_list);
    console.log(tableData.value);
    tableData.value = res.data.ls_list
    tableDataAll.value = res.data.ls_list
    tableData1.value = res.data.sxs_list
    tableDataAlltow.value = res.data.sxs_list
    // options.value = res.data.ls_list
    // optionsXS.value = res.data.sxs_list
    console.log(tableData.value);


  })
};
getPageList()
interface User {
  name: string
  Levelofcare: string
  Administrative_office: string
  board_time: string
  id: number | string
  // value: string
  label: string
}
interface User1 {
  name: string
  Levelofcare: string
  Administrative_office: string
  board_time: string
  id: number | string
  value: string
  label: string
}
//创建一个老师数组
const Teacharr = ref<User[]>([])
//创建一个学生数组
const Stuarr1 = ref<User1[]>([])
//创建一个合并老师和学生的数组
const Tea_Stuaarr = ref<User[]>([])
//创建一个开始变量接受时间
const go_time = ref('')
//创建一个接受结束时间的变量
const end_time = ref('')
//老师id数组
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  Teacharr.value = val

  multipleSelection.value = val
  console.log(Teacharr.value);
  console.log("我时切换");
}



//在点击baned_dialogVisible的时候清空老师数据
const baned_dialogVisible1 = (done: () => void) => {
  baned_dialogVisible.value = false
  // Teacharr.value = []
  // Stuarr1.value = []
  Tea_Stuaarr.value = []
  done()
}
//删除当前已经绑定的实习生
const dele_exercitation = (row: any) => {
  // Stuarr1.value.splice(index, 1)
  console.log(row);
  save_sxsbd({
    "etype": "delete",
    "id": row.ID
  }).then((res: any) => {
    console.log(res);
    if (res.data.flag) {
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      list_bdlb({
        sxsid: '',
      }).then((res: any) => {
        console.log(res.data.data);
        Stuarr1.value = res.data.data
      })
    } else {
      ElMessage({
        showClose: true,
        message: '删除失败请稍后重试',
        type: 'error',
      })
    }
  })
}
//绑定确认单点击事件
const baned_dialogVisible_cilck = () => {
  //把开始时间和结束时间添加到Stuarr1数组中
  for (let i = 0; i < Stuarr1.value.length; i++) {
    Stuarr1.value[i].go_time = go_time.value
    Stuarr1.value[i].end_time = end_time.value
  }
  if (go_time.value == '') {
    ElMessage({
      showClose: true,
      message: '请选择开始时间',
      type: 'error',
    })
    return

  } else {
    save_sxsbd({
      "etype": "add",
      "ksrq": go_time.value,
      "jsrq": end_time.value,
      "DJarr": Teacharr.value,
      "SXSarr": Stuarr1.value
    }).then((res: any) => {
      console.log(res);
      if (res.data.flag) {
        console.log(baned_dialogVisible.value);

        baned_dialogVisible.value = false
        activeName.value = "second"
        ElMessage({
          showClose: true,
          message: '绑定成功',
          type: 'success',
        })
      } else if (res.data.flag == false) {
        ElMessage({
          showClose: true,
          message: '网络问题请稍后重试',
          type: 'error',
        })
      }
    })
  }
}


const activeName = ref('first')
const multipleTableRef1 = ref<InstanceType<typeof ElTable>>()
const multipleSelection1 = ref<User1[]>([])
const toggleSelection1 = (rows?: User1[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef1.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef1.value!.clearSelection()
  }
}
const handleSelectionChange1 = (val: User1[]) => {
  Stuarr1.value = val
  multipleSelection.value = val
  console.log(Stuarr1.value);
  console.log(multipleSelection.value);
  console.log("wsqiehuan");

}


//弹出框
const dialogVisible = ref(false)
//绑定提示框第二层
const baned_dialogVisible = ref(false)

//数据
const input = ref('')
const inputXS = ref('')
const inputXStwo = ref('')

const optionsXS = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
//切换绑定实习生和未绑定实习生的事件
const handleClick = (done: () => void) => {
  Stuarr1.value = []
  Tea_Stuaarr.value = []
  Teacharr.value = []
  multipleSelection.value = []
  multipleTableRef1.value!.clearSelection()
  multipleTableRef.value!.clearSelection()
}
//tab自己发生变化时改变
const tab_change = () => {
  console.log("我是切换改变");
  list_bdlb({
    sxsid: '',
  }).then((res: any) => {
    console.log(res.data.data);
    Stuarr1.value = res.data.data
  })
}
//数据交换
const ok_bind = () => {
  console.log(Teacharr.value);
  console.log(Stuarr1.value);
  // dialogVisible.value = false
  //判断老师数组中只能有一条数据且学生数组中只能有数据提示ElMessage弹出框
  //判断老师数组且学生数组都不能为空
  if (Teacharr.value.length == 0 && Stuarr1.value.length == 0) {
    ElMessage({
      showClose: true,
      message: '请选择完毕之后再次点击提交按钮',
      type: 'error',
    })
  } else if (Teacharr.value.length == 0) {
    ElMessage({
      showClose: true,
      message: '请选择代教老师',
      type: 'error',
    })
  } else if (Stuarr1.value.length == 0) {
    ElMessage({
      showClose: true,
      message: '请选择实习生',
      type: 'error',
    })
  } else if (Teacharr.value.length == 1 && Stuarr1.value.length > 0) {
    console.log('绑定成功');
    const teacherVal = Teacharr.value[0];
    Tea_Stuaarr.value = Stuarr1.value.map(item => {
      return {
        ...teacherVal,
        id: uuid(),
        children: [item]
      }
    })
    console.log(Tea_Stuaarr.value);

    baned_dialogVisible.value = true
    //把Stuarr1中的数据添加到Tea_Stuaarr中
  } else {
    ElMessage({
      showClose: true,
      message: '请重新选择',
      type: 'error',
    })
  }
}

//查询带教老师或者实习生
const CXbtn = () => {
  if (input.value != "") {
    tableData.value = tableDataAll.value.filter((item: any) => {
      return item.XM == input.value
    })
  }
  if (inputXS.value != "") {
    tableData1.value = tableDataAlltow.value.filter((item: any) => {
      return item.XM == inputXS.value
    })
  }
  //把input.value和tableData.XM一样的重新赋值给tableData

  console.log(tableData.value);

}
//绑定实习生查询
const goList = (e: any) => {
  console.log(e);

  console.log("11111111122222222222");

  console.log(inputXStwo);
  if (inputXStwo.value != "") {
    //拿到学生的值去和Stuarr1中的值进行比较
    Stuarr1.value = Stuarr1.value.filter((item: any) => {
      return item.SXSXM == inputXStwo.value
    })

  }

}
//老师，当输入框发生变化时 为空的时候把接口重新回调一下
const input1 = (e: any) => {
  console.log(e);
  if (e == '') {
    getPageList(lsid.value, KSSJ.value, JSSJ.value)
  }
}
//实习生，当输入框发生变化时 为空的时候把接口重新回调一下
const input2 = (e: any) => {
  console.log(e);
  if (e == '') {
    getPageList(lsid.value, KSSJ.value, JSSJ.value)
  }
}
//实习生，当输入框发生变化时 为空的时候把接口重新回调一下
const input3 = (e: any) => {
  console.log(e);
  if (e == '') {
    list_bdlb({
      sxsid: '',
    }).then((res: any) => {
      console.log(res.data.data);
      Stuarr1.value = res.data.data
    })
  }
}
</script>

<template>
  <el-config-provider :locale="locale">
    <el-button type="primary" @click="dialogVisible = true">绑定</el-button>
    <el-dialog v-model="dialogVisible" title="带教绑定" width="900" :before-close="handleClose">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" @tab-change="tab_change">
        <el-tab-pane label="未绑定实习生" name="first">
          <!-- 老师查询 -->
          <el-row :gutter="26">
            <el-col :span="10">
              <div style="display: flex;">
                <div style="line-height: 30px;">带教老师:</div>
                <div style="margin-left: 10px;">
                  <el-input v-model="input" placeholder="请输入姓名" @change="changeinput" @input="input1" />
                  <!-- <el-select v-model="value" placeholder="查询" style="width: 240px">
                    <el-option v-for="item in options.value" :key="item.ZGID" :label="item.XM" :value="item.ZGID" />
                  </el-select> -->
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;">
                <div style="line-height: 30px;">实习生:</div>
                <div style="margin-left: 10px;">
                  <el-input v-model="inputXS" placeholder="请输入姓名" @input="input2" />
                  <!-- <el-select v-model="valueXS" placeholder="查询" style="width: 240px">
                    <el-option v-for="item in optionsXS.value" :key="item.ZGID" :label="item.XM" :value="item.XM" />
                  </el-select> -->
                </div>
                <el-col :span="6"><el-button type="primary" @click="CXbtn">查询</el-button></el-col>
              </div>
            </el-col>
          </el-row>
          <!-- 老师表单 -->
          <el-card style="margin-top: 10px;">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="250" empty-text="暂时还没有数据"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" fixed />
              <el-table-column property="XM" label="代教老师" width="120" />
              <el-table-column property="CJMC" label="护理层级" show-overflow-tooltip>
                <template #default="scope">
                  <div>{{ scope.row.CJMC == null ? "暂无" : scope.row.CJMC }}</div>
                </template>

              </el-table-column>
              <el-table-column property="KSMC" label="科室" show-overflow-tooltip>
                <template #default="scope">
                  <div>{{ scope.row.KSMC == null ? "暂无" : scope.row.KSMC }}</div>
                </template>
              </el-table-column>
              <el-table-column property="DYRQ" label="入职时间" show-overflow-tooltip />
            </el-table>
          </el-card>
          <!-- 实习生表单 -->
          <el-card style="margin-top: 20px;">
            <el-table ref="multipleTableRef1" :data="tableData1" style="width: 100%" height="250" empty-text="暂时还没有数据"
              @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55" fixed />
              <el-table-column property="XM" label="实习生" width="120" />
              <el-table-column property="CJMC" label="护理层级" show-overflow-tooltip>
                <template #default="scope">
                  <div>{{ scope.row.CJMC == null ? "暂无" : scope.row.CJMC }}</div>
                </template>
              </el-table-column>
              <el-table-column property="KSMC" label="实习科室" show-overflow-tooltip>
                <template #default="scope">
                  <div>{{ scope.row.KSMC == null ? "暂无" : scope.row.KSMC }}</div>
                </template>
              </el-table-column>
              <el-table-column property="DYRQ" label="实习日期" show-overflow-tooltip />
            </el-table>
          </el-card></el-tab-pane>
        <el-tab-pane label="已绑定实习生" name="second">
          <el-row :gutter="26">
            <el-col :span="12">
              <div style="display: flex;">
                <div style="line-height: 30px;">实习生:</div>
                <div style="margin-left: 10px;">
                  <el-input v-model="inputXStwo" placeholder="请输入姓名" @input="input3" />
                </div>
                <el-col :span="6"><el-button type="primary" @click="goList">查询</el-button></el-col>
              </div>
            </el-col>
            <el-col style="margin-top: 10px;">
              <el-table :data="Stuarr1" stripe style="width: 100%" empty-text="暂时还没有实习生" height="450">
                <el-table-column prop="SXSXM" label="实习生" />
                <el-table-column prop="DJLSXM" label="带教老师" />
                <el-table-column prop="HSCJMC" label="护理层级" />
                <el-table-column prop="SXKSMC" label="实习科室" />
                <el-table-column prop="KSRQ" label="开始时间">
                  <template #default="scope">
                    <div>{{ scope.row.KSRQ == null ? "未设置开始时间" : scope.row.KSRQ }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="JSRQ" label="结束时间">
                  <template #default="scope">
                    <div>{{ scope.row.JSRQ == null ? "未设置结束时间" : scope.row.JSRQ }}</div>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-button link type="danger" size="small" @click="dele_exercitation(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>

      <template #footer>
        <div class="dialog-footer" style="justify-content: space-evenly;">
          <el-button type="primary" @click="ok_bind">绑定</el-button>
          <el-button type="danger" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 绑定提示框 -->
    <el-dialog v-model="baned_dialogVisible" title="绑定确认" width="700" :before-close="handleClose">

      <el-card>
        <div style="display: flex;justify-content: space-between;">
          <div style="display: flex;">
            <div style="line-height: 30px;">开始日期:</div>
            <div style="margin-left: 5px;">


              <el-date-picker v-model="go_time" format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date"
                placeholder="请选择" :size="size" />
            </div>
          </div>
          <div style="display: flex; ">
            <div style="display: flex;">
              <div style="line-height: 30px;">结束日期:</div>
              <div style="margin-left: 5px;">
                <el-date-picker v-model="end_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                  placeholder="请选择" :size="size" />
              </div>
            </div>
          </div>
          <div>
          </div>
        </div>
        <!-- 数据展示 -->
        <div v-for="(item, index) in Tea_Stuaarr" :key="item.name"
          style="background-color: #F5F5F5;width: 390px;margin: 0 auto;margin-top: 20px;height: 110px;text-align: center;">
          <div style="display: flex;height: 60px;justify-content: space-between;">
            <div style="display: flex; margin-left: 20px;margin-top: 20px;">{{ item.XM }} <div
                style="width: 40px;height:20px;text-align: center; font-size: 12px;background-color: #FF5733;color: white;">
                带教</div>
            </div>
            <div style="display: flex; margin-left: 20px;margin-top: 20px;">层级：{{ item.CJMC }}</div>
            <div style="display: flex; margin-right: 10px;margin-top: 20px;">科室：{{ item.KSMC }}</div>
            <!-- 实习生数据 -->
          </div>
          <div v-for="(item1, index) in item.children" :key="item1.name" style="margin-top: 0px; text-align: center;">
            <div style="display: flex;justify-content: space-between;margin-top: 0px;">
              <div style="display: flex; margin-left: 20px; ">{{ item1.XM }} <div
                  style="width: 40px;height:20px;text-align: center; font-size: 12px;background-color: #43CF7C;color: white;">
                  实习生</div>
              </div>
              <div style="display: flex; ">层级：{{ item.CJMC }}</div>
              <div style="display: flex;  margin-right: 10px;">实习科室：{{ item.KSMC }}</div>
            </div>
          </div>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="baned_dialogVisible1">关闭</el-button>
          <el-button type="primary" @click="baned_dialogVisible_cilck">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-config-provider>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
